{"version":3,"file":"static/chunks/pages/blogs/[slug]-3d61310a4c8feb94.js","mappings":"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","sources":["webpack://_N_E/?f68f","webpack://_N_E/./src/components/base/seo.tsx","webpack://_N_E/./src/components/base/index.ts","webpack://_N_E/./src/layouts/EmptyLayout/index.tsx","webpack://_N_E/./src/layouts/index.tsx","webpack://_N_E/./src/components/base/Markdown.tsx","webpack://_N_E/./src/hooks/useResize.ts","webpack://_N_E/./src/components/base/CopyToClipboard.tsx","webpack://_N_E/./src/assets/svgs/copy.svg","webpack://_N_E/./src/components/blog-detail/view.tsx","webpack://_N_E/./src/components/blog-detail/container.tsx","webpack://_N_E/./src/components/blog-detail/index.tsx","webpack://_N_E/./src/pages/blogs/[slug].tsx","webpack://_N_E/./src/utils/apis/blogs.ts","webpack://_N_E/<anon>"],"sourcesContent":["\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/blogs/[slug]\",\n      function () {\n        return require(\"private-next-pages/blogs/[slug].tsx\");\n      }\n    ]);\n    if(module.hot) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/blogs/[slug]\"])\n      });\n    }\n  ","import React from 'react'\nimport Head from 'next/head'\n\ninterface SeoData {\n  title: string;\n  description: string;\n  url?: string;\n  thumbnailUrl?: string;\n}\n\ninterface SeoProps {\n  data: SeoData;\n}\n\nconst Seo = ({ data }: SeoProps) => {\n  const { title, description, url, thumbnailUrl } = data\n  const ahrefMetaContent = process.env.NEXT_PUBLIC_AHREF_META\n\n  return (\n    <Head>\n      {/* <!-- Primary Meta Tags --> */}\n      <title>{title}</title>\n      <meta name=\"title\" content={title} />\n      <meta name=\"description\" content={description} />\n\n      {/* <!-- Open Graph / Facebook --> */}\n      <meta property=\"og:type\" content=\"website\" />\n      <meta property=\"og:url\" content={url} />\n      <meta property=\"og:title\" content={title} />\n      <meta property=\"og:description\" content={description} />\n      <meta property=\"og:image\" content={thumbnailUrl} />\n\n      {/* <!-- Twitter --> */}\n      <meta property=\"twitter:card\" content=\"summary_large_image\" />\n      <meta property=\"twitter:url\" content={url} />\n      <meta property=\"twitter:title\" content={title} />\n      <meta property=\"twitter:description\" content={description} />\n      <meta property=\"twitter:image\" content={thumbnailUrl} />\n      {/* <!-- Ahref --> */}\n      <meta name=\"ahrefs-site-verification\" content={ahrefMetaContent} />\n    </Head>\n  )\n}\n\nexport default Seo\n","export { default as Seo } from './seo'\n","import 'react-lazy-load-image-component/src/effects/blur.css'\nimport { Paper } from '@mui/material'\n\nexport const EmptyLayout = ({ children }: HocProps) => {\n  return (\n    <Paper className=\"bg-white relative flex flex-col\">\n        {children}\n    </Paper>\n  )\n}\n","export * from './MainLayout'\nexport * from './EmptyLayout'\n","import Image from 'next/image'\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\n\nfunction YouTubeVideo(props: { id: any }) {\n  const { id } = props\n  const ref = useRef<HTMLDivElement>(null)\n  const src = `https://www.youtube.com/embed/${id}`\n  const [width, setWidth] = useState(0)\n\n  useLayoutEffect(() => {\n    setWidth(ref.current?.offsetWidth || 0)\n  }, [])\n\n  return (\n    <div className=\"youtube-video\" ref={ref}>\n      <iframe\n        src={src}\n        width={'100%'}\n        height={(width / 15) * 9}\n        allow=\"autoplay; encrypted-media\"\n        title='Propeasy instroduction'\n      />\n    </div>\n  )\n}\n\nconst Markdown = ({ maxWidth, input }: { maxWidth?: number; input: string }) => {\n  return (\n    <ReactMarkdown\n      // eslint-disable-next-line react/no-children-prop\n      children={input}\n      className=\"prose max-w-none\"\n      components={{\n        img: ({ alt, src, title }: { alt?: string; src?: string; title?: string }) => {\n          if (alt === 'youtube') {\n            const id = (src || '').split('v=')[1]\n            return <YouTubeVideo id={id} />\n          }\n          return (\n            <Image\n              alt={alt || ''}\n              src={src || ''}\n              title={title}\n              style={{\n                maxWidth: maxWidth || 320,\n                display: 'block',\n                margin: 'auto',\n              }}\n            />\n          )\n        },\n      }}\n    />\n  )\n}\n\nexport default Markdown\n","import { useCallback, useEffect, useState } from 'react'\n\nconst useResize = (myRef: React.RefObject<HTMLDivElement>) => {\n  const getWidth = useCallback(() => myRef?.current?.offsetWidth, [myRef])\n  const [width, setWidth] = useState<number | undefined>(undefined)\n\n  useEffect(() => {\n    const handleResize = () => {\n      setWidth(getWidth())\n    }\n\n    if (myRef.current) {\n      setWidth(getWidth())\n    }\n\n    window.addEventListener('resize', handleResize)\n\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [myRef, getWidth])\n\n  return width && width > 25 ? width - 25 : width\n}\n\nexport default useResize\n","import { Button, Tooltip } from '@mui/material'\nimport copy from 'copy-to-clipboard'\nimport { useState } from 'react'\n\ntype CopyToClipboardProps = {\n  text: string\n  children: any\n}\n\nconst CopyToClipboard = ({ text, children }: CopyToClipboardProps) => {\n  const [copiedText, setCopiedText] = useState<string>('')\n\n  const handleClickCopy = () => {\n    copy(text)\n    setCopiedText(text)\n  }\n\n  return (\n    <Tooltip title={copiedText === text ? 'Copied' : 'Copy To Clipboard'}>\n      <Button\n        sx={{ border: 1, borderColor: 'gray', textTransform: 'none' }}\n        onClick={handleClickCopy}\n      >\n        {children}\n      </Button>\n    </Tooltip>\n  )\n}\n\nexport default CopyToClipboard\n","export default {\"src\":\"/_next/static/media/copy.1d49ac4c.svg\",\"height\":20,\"width\":19};","import React, { memo, useRef } from 'react'\nimport { Box, Container, IconButton, Stack, Typography } from '@mui/material'\nimport { IBlogDetail } from '@/components/blog-detail/types'\nimport useTrans from '@/hooks/useTrans'\nimport Image from 'next/image'\nimport Markdown from '../base/Markdown'\nimport useResize from '../../hooks/useResize'\nimport { FacebookShareButton, TelegramShareButton, TwitterShareButton } from 'react-share'\nimport { IconName, staticImportIcon } from '@/utils/static-import-icon'\nimport { PROPEASY_SITE_URL } from '@/utils/helpers'\nimport CopyToClipboard from '../base/CopyToClipboard'\nimport CopyIcon from '@/assets/svgs/copy.svg'\nimport { useRouter } from 'next/router'\n\nconst View = ({ blog }: { blog: IBlogDetail }) => {\n  const trans = useTrans()\n  const router = useRouter()\n  const ref = useRef<HTMLDivElement>(null)\n  const maxWidth = useResize(ref)\n  const urlShare = `${PROPEASY_SITE_URL}/blogs/${blog.slug}`\n\n  return (\n    <Container className=\"py-6\">\n      <Stack direction=\"column\" spacing={3}>\n        <IconButton\n          className=\"bg-[#F0F0EF] text-[#0F0E0C] px-3 mb-5 text-sm font-medium not-italic rounded-3xl max-w-fit\"\n          aria-label=\"back\"\n          size=\"small\"\n          onClick={() => router.push('/blogs')}\n        >\n          <Image\n            className=\"inline mr-2\"\n            src={staticImportIcon(IconName.BACK_ICON)}\n            height={16}\n            alt={IconName.BACK_ICON}\n          />\n          {trans.common.back}\n        </IconButton>\n        <Stack direction=\"column\" spacing={1} alignItems=\"center\">\n          <Typography className=\"text-sm font-medium text-[#033C59]\">\n            {trans.blog_detail.published_at} {blog.public_date}\n          </Typography>\n          <Typography variant=\"h1\" className=\"text-3xl font-bold\">\n            {blog.title}\n          </Typography>\n        </Stack>\n        <Stack direction=\"row\" gap={3} justifyContent=\"center\">\n          <FacebookShareButton url={urlShare}>\n            <Image\n              src={staticImportIcon(IconName.FACEBOOK_DARK_ICON)}\n              alt={IconName.FACEBOOK_DARK_ICON}\n              width={32}\n            />\n          </FacebookShareButton>\n          <TwitterShareButton url={urlShare}>\n            <Image\n              src={staticImportIcon(IconName.TWITTER_DARK_ICON)}\n              alt={IconName.TWITTER_DARK_ICON}\n              width={32}\n            />\n          </TwitterShareButton>\n          <TelegramShareButton url={urlShare}>\n            <Image\n              src={staticImportIcon(IconName.TELEGRAM_DARK_ICON)}\n              alt={IconName.TELEGRAM_DARK_ICON}\n              width={32}\n            />\n          </TelegramShareButton>\n          <CopyToClipboard text={urlShare}>\n            <Stack direction=\"row\" spacing={1}>\n              <Image src={CopyIcon} alt=\"copy-icon\" width={20} height={20} />\n              <Typography className=\"text-sm\">Copy link</Typography>\n            </Stack>\n          </CopyToClipboard>\n        </Stack>\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'center',\n          }}\n        >\n          <img src={blog.banner} alt=\"banner\" className=\"max-w-[100%] max-h-[520px] rounded-lg\" />\n        </Box>\n        <Box ref={ref}>\n          <Markdown input={blog.content} maxWidth={maxWidth} />\n        </Box>\n      </Stack>\n    </Container>\n  )\n}\nconst BlogDetailWithMemo = memo(View)\nBlogDetailWithMemo.displayName = 'BlogDetailView'\nexport default BlogDetailWithMemo\n","import { IBlogDetail } from '@/components/blog-detail/types'\nimport View from './view'\n\nconst BlogDetailPage = ({ blog }: { blog: IBlogDetail }) => {\n  const computedProps = { blog }\n\n  return <View {...computedProps} />\n}\nBlogDetailPage.displayName = 'BlogDetailPageContainer'\nexport default BlogDetailPage\n","export { default } from './container'\n","import { MainLayout } from '@/root/src/layouts'\nimport { dehydrate, QueryClient, useQuery } from 'react-query'\nimport { fetchBlogDetail } from '@/utils/apis/blogs'\nimport { useEffect, useState } from 'react'\nimport { Seo } from '@/components/base'\nimport BlogDetailPage from '@/components/blog-detail'\n\nconst BlogDetails = ({ slug }: { slug: string }) => {\n  const [blogDetail, setBlogDetail] = useState({} as any)\n  const { data: dataBlogDetail } = useQuery(['getBlogDetail'], () => fetchBlogDetail(slug))\n\n  useEffect(() => {\n    setBlogDetail(dataBlogDetail)\n  }, [dataBlogDetail, slug])\n\n  return (\n    <>\n      <Seo\n        data={{\n          title: blogDetail.title,\n          description: blogDetail.description,\n          thumbnailUrl: blogDetail.banner,\n        }}\n      />\n      <MainLayout>\n        <BlogDetailPage blog={blogDetail} />\n      </MainLayout>\n    </>\n  )\n}\n\nexport default BlogDetails\n\nexport const getServerSideProps = async (context: { locale: string; query: { slug: string } }) => {\n  const queryClient = new QueryClient()\n  await queryClient.prefetchQuery(['getBlogDetail'], () => fetchBlogDetail(context.query.slug))\n\n  return {\n    props: {\n      slug: context.query.slug,\n      dehydratedState: dehydrate(queryClient),\n    },\n  }\n}\n","import api from '@/utils/apis/index'\n\nexport const fetchBlogsList = async (lang: string, page: number, per: number) => {\n  const { data } = await api.get('/blogs', {\n    params: { lang, page, per, workspace: 'propeasy' },\n  })\n\n  return data\n}\n\nexport const fetchBlogDetail = async (slug: string) => {\n  const { data } = await api.get(`/blog/${slug}`)\n  return data\n}\n","(self[\"webpackChunk_N_E\"] = self[\"webpackChunk_N_E\"] || []).push([[196],{\n\n/***/ 35106:\n/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {\n\n\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/blogs/[slug]\",\n      function () {\n        return __webpack_require__(50254);\n      }\n    ]);\n    if(false) {}\n  \n\n/***/ }),\n\n/***/ 13171:\n/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n\n// EXPORTS\n__webpack_require__.d(__webpack_exports__, {\n  \"p\": function() { return /* reexport */ seo; }\n});\n\n// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js\nvar jsx_runtime = __webpack_require__(85893);\n// EXTERNAL MODULE: ./node_modules/react/index.js\nvar react = __webpack_require__(67294);\n// EXTERNAL MODULE: ./node_modules/next/head.js\nvar head = __webpack_require__(9008);\nvar head_default = /*#__PURE__*/__webpack_require__.n(head);\n;// CONCATENATED MODULE: ./src/components/base/seo.tsx\n\n\n\nconst Seo = (param)=>{\n    let { data  } = param;\n    const { title , description , url , thumbnailUrl  } = data;\n    const ahrefMetaContent = \"d3cf8e06059031bdfedf8aba1366147fd131c824ed52272cdde66a8a1be830e9\";\n    return /*#__PURE__*/ (0,jsx_runtime.jsxs)((head_default()), {\n        children: [\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"title\", {\n                children: title\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                name: \"title\",\n                content: title\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                name: \"description\",\n                content: description\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                property: \"og:type\",\n                content: \"website\"\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                property: \"og:url\",\n                content: url\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                property: \"og:title\",\n                content: title\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                property: \"og:description\",\n                content: description\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                property: \"og:image\",\n                content: thumbnailUrl\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                property: \"twitter:card\",\n                content: \"summary_large_image\"\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                property: \"twitter:url\",\n                content: url\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                property: \"twitter:title\",\n                content: title\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                property: \"twitter:description\",\n                content: description\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                property: \"twitter:image\",\n                content: thumbnailUrl\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(\"meta\", {\n                name: \"ahrefs-site-verification\",\n                content: ahrefMetaContent\n            })\n        ]\n    });\n};\n/* harmony default export */ var seo = (Seo);\n\n;// CONCATENATED MODULE: ./src/components/base/index.ts\n\n\n\n/***/ }),\n\n/***/ 99697:\n/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n\n// EXPORTS\n__webpack_require__.d(__webpack_exports__, {\n  \"T\": function() { return /* reexport */ EmptyLayout; },\n  \"Z\": function() { return /* reexport */ MainLayout/* MainLayout */.Z; }\n});\n\n// EXTERNAL MODULE: ./src/layouts/MainLayout/index.tsx + 16 modules\nvar MainLayout = __webpack_require__(48520);\n// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js\nvar jsx_runtime = __webpack_require__(85893);\n// EXTERNAL MODULE: ./node_modules/react-lazy-load-image-component/src/effects/blur.css\nvar effects_blur = __webpack_require__(86946);\n// EXTERNAL MODULE: ./node_modules/@mui/material/Paper/Paper.js + 2 modules\nvar Paper = __webpack_require__(90629);\n;// CONCATENATED MODULE: ./src/layouts/EmptyLayout/index.tsx\n\n\n\nconst EmptyLayout = (param)=>{\n    let { children  } = param;\n    return /*#__PURE__*/ (0,jsx_runtime.jsx)(Paper/* default */.Z, {\n        className: \"bg-white relative flex flex-col\",\n        children: children\n    });\n};\n\n;// CONCATENATED MODULE: ./src/layouts/index.tsx\n\n\n\n\n/***/ }),\n\n/***/ 50254:\n/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n// ESM COMPAT FLAG\n__webpack_require__.r(__webpack_exports__);\n\n// EXPORTS\n__webpack_require__.d(__webpack_exports__, {\n  \"__N_SSP\": function() { return /* binding */ __N_SSP; },\n  \"default\": function() { return /* binding */ _slug_; }\n});\n\n// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js\nvar jsx_runtime = __webpack_require__(85893);\n// EXTERNAL MODULE: ./src/layouts/index.tsx + 1 modules\nvar layouts = __webpack_require__(99697);\n// EXTERNAL MODULE: ./node_modules/react-query/es/index.js\nvar es = __webpack_require__(88767);\n// EXTERNAL MODULE: ./src/utils/apis/blogs.ts\nvar blogs = __webpack_require__(26148);\n// EXTERNAL MODULE: ./node_modules/react/index.js\nvar react = __webpack_require__(67294);\n// EXTERNAL MODULE: ./src/components/base/index.ts + 1 modules\nvar base = __webpack_require__(13171);\n// EXTERNAL MODULE: ./node_modules/@mui/material/Container/Container.js + 1 modules\nvar Container = __webpack_require__(65582);\n// EXTERNAL MODULE: ./node_modules/@mui/material/Stack/Stack.js + 1 modules\nvar Stack = __webpack_require__(51233);\n// EXTERNAL MODULE: ./node_modules/@mui/material/IconButton/IconButton.js + 1 modules\nvar IconButton = __webpack_require__(93946);\n// EXTERNAL MODULE: ./node_modules/@mui/material/Typography/Typography.js + 1 modules\nvar Typography = __webpack_require__(46483);\n// EXTERNAL MODULE: ./node_modules/@mui/material/Box/Box.js\nvar Box = __webpack_require__(99226);\n// EXTERNAL MODULE: ./src/hooks/useTrans.ts + 2 modules\nvar useTrans = __webpack_require__(72712);\n// EXTERNAL MODULE: ./node_modules/next/image.js\nvar next_image = __webpack_require__(25675);\nvar image_default = /*#__PURE__*/__webpack_require__.n(next_image);\n// EXTERNAL MODULE: ./node_modules/react-markdown/lib/index.js + 128 modules\nvar lib = __webpack_require__(21798);\n;// CONCATENATED MODULE: ./src/components/base/Markdown.tsx\n\n\n\n\nfunction YouTubeVideo(props) {\n    const { id  } = props;\n    const ref = (0,react.useRef)(null);\n    const src = \"https://www.youtube.com/embed/\".concat(id);\n    const [width, setWidth] = (0,react.useState)(0);\n    (0,react.useLayoutEffect)(()=>{\n        var _ref_current;\n        setWidth(((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.offsetWidth) || 0);\n    }, []);\n    return /*#__PURE__*/ (0,jsx_runtime.jsx)(\"div\", {\n        className: \"youtube-video\",\n        ref: ref,\n        children: /*#__PURE__*/ (0,jsx_runtime.jsx)(\"iframe\", {\n            src: src,\n            width: \"100%\",\n            height: width / 15 * 9,\n            allow: \"autoplay; encrypted-media\",\n            title: \"Propeasy instroduction\"\n        })\n    });\n}\nconst Markdown = (param)=>{\n    let { maxWidth , input  } = param;\n    return /*#__PURE__*/ (0,jsx_runtime.jsx)(lib/* Markdown */.U, {\n        // eslint-disable-next-line react/no-children-prop\n        children: input,\n        className: \"prose max-w-none\",\n        components: {\n            img: (param)=>{\n                let { alt , src , title  } = param;\n                if (alt === \"youtube\") {\n                    const id = (src || \"\").split(\"v=\")[1];\n                    return /*#__PURE__*/ (0,jsx_runtime.jsx)(YouTubeVideo, {\n                        id: id\n                    });\n                }\n                return /*#__PURE__*/ (0,jsx_runtime.jsx)((image_default()), {\n                    alt: alt || \"\",\n                    src: src || \"\",\n                    title: title,\n                    style: {\n                        maxWidth: maxWidth || 320,\n                        display: \"block\",\n                        margin: \"auto\"\n                    }\n                });\n            }\n        }\n    });\n};\n/* harmony default export */ var base_Markdown = (Markdown);\n\n;// CONCATENATED MODULE: ./src/hooks/useResize.ts\n\nconst useResize = (myRef)=>{\n    const getWidth = (0,react.useCallback)(()=>{\n        var _myRef_current;\n        return myRef === null || myRef === void 0 ? void 0 : (_myRef_current = myRef.current) === null || _myRef_current === void 0 ? void 0 : _myRef_current.offsetWidth;\n    }, [\n        myRef\n    ]);\n    const [width, setWidth] = (0,react.useState)(undefined);\n    (0,react.useEffect)(()=>{\n        const handleResize = ()=>{\n            setWidth(getWidth());\n        };\n        if (myRef.current) {\n            setWidth(getWidth());\n        }\n        window.addEventListener(\"resize\", handleResize);\n        return ()=>{\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, [\n        myRef,\n        getWidth\n    ]);\n    return width && width > 25 ? width - 25 : width;\n};\n/* harmony default export */ var hooks_useResize = (useResize);\n\n// EXTERNAL MODULE: ./node_modules/react-share/es/FacebookShareButton.js\nvar FacebookShareButton = __webpack_require__(16573);\n// EXTERNAL MODULE: ./node_modules/react-share/es/TwitterShareButton.js\nvar TwitterShareButton = __webpack_require__(46616);\n// EXTERNAL MODULE: ./node_modules/react-share/es/TelegramShareButton.js\nvar TelegramShareButton = __webpack_require__(38168);\n// EXTERNAL MODULE: ./src/utils/static-import-icon.tsx + 64 modules\nvar static_import_icon = __webpack_require__(38868);\n// EXTERNAL MODULE: ./src/utils/helpers.ts\nvar helpers = __webpack_require__(73680);\n// EXTERNAL MODULE: ./node_modules/@mui/material/Tooltip/Tooltip.js\nvar Tooltip = __webpack_require__(21023);\n// EXTERNAL MODULE: ./node_modules/@mui/material/Button/Button.js + 3 modules\nvar Button = __webpack_require__(69417);\n// EXTERNAL MODULE: ./node_modules/copy-to-clipboard/index.js\nvar copy_to_clipboard = __webpack_require__(20640);\nvar copy_to_clipboard_default = /*#__PURE__*/__webpack_require__.n(copy_to_clipboard);\n;// CONCATENATED MODULE: ./src/components/base/CopyToClipboard.tsx\n\n\n\n\nconst CopyToClipboard = (param)=>{\n    let { text , children  } = param;\n    const [copiedText, setCopiedText] = (0,react.useState)(\"\");\n    const handleClickCopy = ()=>{\n        copy_to_clipboard_default()(text);\n        setCopiedText(text);\n    };\n    return /*#__PURE__*/ (0,jsx_runtime.jsx)(Tooltip/* default */.Z, {\n        title: copiedText === text ? \"Copied\" : \"Copy To Clipboard\",\n        children: /*#__PURE__*/ (0,jsx_runtime.jsx)(Button/* default */.Z, {\n            sx: {\n                border: 1,\n                borderColor: \"gray\",\n                textTransform: \"none\"\n            },\n            onClick: handleClickCopy,\n            children: children\n        })\n    });\n};\n/* harmony default export */ var base_CopyToClipboard = (CopyToClipboard);\n\n;// CONCATENATED MODULE: ./src/assets/svgs/copy.svg\n/* harmony default export */ var copy = ({\"src\":\"/_next/static/media/copy.1d49ac4c.svg\",\"height\":20,\"width\":19});\n// EXTERNAL MODULE: ./node_modules/next/router.js\nvar next_router = __webpack_require__(11163);\n;// CONCATENATED MODULE: ./src/components/blog-detail/view.tsx\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst View = (param)=>{\n    let { blog  } = param;\n    const trans = (0,useTrans/* default */.Z)();\n    const router = (0,next_router.useRouter)();\n    const ref = (0,react.useRef)(null);\n    const maxWidth = hooks_useResize(ref);\n    const urlShare = \"\".concat(helpers/* PROPEASY_SITE_URL */.s3, \"/blogs/\").concat(blog.slug);\n    return /*#__PURE__*/ (0,jsx_runtime.jsx)(Container/* default */.Z, {\n        className: \"py-6\",\n        children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(Stack/* default */.Z, {\n            direction: \"column\",\n            spacing: 3,\n            children: [\n                /*#__PURE__*/ (0,jsx_runtime.jsxs)(IconButton/* default */.Z, {\n                    className: \"bg-[#F0F0EF] text-[#0F0E0C] px-3 mb-5 text-sm font-medium not-italic rounded-3xl max-w-fit\",\n                    \"aria-label\": \"back\",\n                    size: \"small\",\n                    onClick: ()=>router.push(\"/blogs\"),\n                    children: [\n                        /*#__PURE__*/ (0,jsx_runtime.jsx)((image_default()), {\n                            className: \"inline mr-2\",\n                            src: (0,static_import_icon/* staticImportIcon */.N)(static_import_icon/* IconName.BACK_ICON */.u.BACK_ICON),\n                            height: 16,\n                            alt: static_import_icon/* IconName.BACK_ICON */.u.BACK_ICON\n                        }),\n                        trans.common.back\n                    ]\n                }),\n                /*#__PURE__*/ (0,jsx_runtime.jsxs)(Stack/* default */.Z, {\n                    direction: \"column\",\n                    spacing: 1,\n                    alignItems: \"center\",\n                    children: [\n                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(Typography/* default */.Z, {\n                            className: \"text-sm font-medium text-[#033C59]\",\n                            children: [\n                                trans.blog_detail.published_at,\n                                \" \",\n                                blog.public_date\n                            ]\n                        }),\n                        /*#__PURE__*/ (0,jsx_runtime.jsx)(Typography/* default */.Z, {\n                            variant: \"h1\",\n                            className: \"text-3xl font-bold\",\n                            children: blog.title\n                        })\n                    ]\n                }),\n                /*#__PURE__*/ (0,jsx_runtime.jsxs)(Stack/* default */.Z, {\n                    direction: \"row\",\n                    gap: 3,\n                    justifyContent: \"center\",\n                    children: [\n                        /*#__PURE__*/ (0,jsx_runtime.jsx)(FacebookShareButton/* default */.Z, {\n                            url: urlShare,\n                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)((image_default()), {\n                                src: (0,static_import_icon/* staticImportIcon */.N)(static_import_icon/* IconName.FACEBOOK_DARK_ICON */.u.FACEBOOK_DARK_ICON),\n                                alt: static_import_icon/* IconName.FACEBOOK_DARK_ICON */.u.FACEBOOK_DARK_ICON,\n                                width: 32\n                            })\n                        }),\n                        /*#__PURE__*/ (0,jsx_runtime.jsx)(TwitterShareButton/* default */.Z, {\n                            url: urlShare,\n                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)((image_default()), {\n                                src: (0,static_import_icon/* staticImportIcon */.N)(static_import_icon/* IconName.TWITTER_DARK_ICON */.u.TWITTER_DARK_ICON),\n                                alt: static_import_icon/* IconName.TWITTER_DARK_ICON */.u.TWITTER_DARK_ICON,\n                                width: 32\n                            })\n                        }),\n                        /*#__PURE__*/ (0,jsx_runtime.jsx)(TelegramShareButton/* default */.Z, {\n                            url: urlShare,\n                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)((image_default()), {\n                                src: (0,static_import_icon/* staticImportIcon */.N)(static_import_icon/* IconName.TELEGRAM_DARK_ICON */.u.TELEGRAM_DARK_ICON),\n                                alt: static_import_icon/* IconName.TELEGRAM_DARK_ICON */.u.TELEGRAM_DARK_ICON,\n                                width: 32\n                            })\n                        }),\n                        /*#__PURE__*/ (0,jsx_runtime.jsx)(base_CopyToClipboard, {\n                            text: urlShare,\n                            children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(Stack/* default */.Z, {\n                                direction: \"row\",\n                                spacing: 1,\n                                children: [\n                                    /*#__PURE__*/ (0,jsx_runtime.jsx)((image_default()), {\n                                        src: copy,\n                                        alt: \"copy-icon\",\n                                        width: 20,\n                                        height: 20\n                                    }),\n                                    /*#__PURE__*/ (0,jsx_runtime.jsx)(Typography/* default */.Z, {\n                                        className: \"text-sm\",\n                                        children: \"Copy link\"\n                                    })\n                                ]\n                            })\n                        })\n                    ]\n                }),\n                /*#__PURE__*/ (0,jsx_runtime.jsx)(Box/* default */.Z, {\n                    sx: {\n                        display: \"flex\",\n                        justifyContent: \"center\"\n                    },\n                    children: /*#__PURE__*/ (0,jsx_runtime.jsx)(\"img\", {\n                        src: blog.banner,\n                        alt: \"banner\",\n                        className: \"max-w-[100%] max-h-[520px] rounded-lg\"\n                    })\n                }),\n                /*#__PURE__*/ (0,jsx_runtime.jsx)(Box/* default */.Z, {\n                    ref: ref,\n                    children: /*#__PURE__*/ (0,jsx_runtime.jsx)(base_Markdown, {\n                        input: blog.content,\n                        maxWidth: maxWidth\n                    })\n                })\n            ]\n        })\n    });\n};\nconst BlogDetailWithMemo = /*#__PURE__*/ (0,react.memo)(View);\nBlogDetailWithMemo.displayName = \"BlogDetailView\";\n/* harmony default export */ var view = (BlogDetailWithMemo);\n\n;// CONCATENATED MODULE: ./src/components/blog-detail/container.tsx\n\n\nconst BlogDetailPage = (param)=>{\n    let { blog  } = param;\n    const computedProps = {\n        blog\n    };\n    return /*#__PURE__*/ (0,jsx_runtime.jsx)(view, {\n        ...computedProps\n    });\n};\nBlogDetailPage.displayName = \"BlogDetailPageContainer\";\n/* harmony default export */ var container = (BlogDetailPage);\n\n;// CONCATENATED MODULE: ./src/components/blog-detail/index.tsx\n\n\n;// CONCATENATED MODULE: ./src/pages/blogs/[slug].tsx\n\n\n\n\n\n\n\nconst BlogDetails = (param)=>{\n    let { slug  } = param;\n    const [blogDetail, setBlogDetail] = (0,react.useState)({});\n    const { data: dataBlogDetail  } = (0,es.useQuery)([\n        \"getBlogDetail\"\n    ], ()=>(0,blogs/* fetchBlogDetail */.N)(slug));\n    (0,react.useEffect)(()=>{\n        setBlogDetail(dataBlogDetail);\n    }, [\n        dataBlogDetail,\n        slug\n    ]);\n    return /*#__PURE__*/ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {\n        children: [\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(base/* Seo */.p, {\n                data: {\n                    title: blogDetail.title,\n                    description: blogDetail.description,\n                    thumbnailUrl: blogDetail.banner\n                }\n            }),\n            /*#__PURE__*/ (0,jsx_runtime.jsx)(layouts/* MainLayout */.Z, {\n                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(container, {\n                    blog: blogDetail\n                })\n            })\n        ]\n    });\n};\nvar __N_SSP = true;\n/* harmony default export */ var _slug_ = (BlogDetails);\n\n\n/***/ }),\n\n/***/ 26148:\n/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"N\": function() { return /* binding */ fetchBlogDetail; },\n/* harmony export */   \"Q\": function() { return /* binding */ fetchBlogsList; }\n/* harmony export */ });\n/* harmony import */ var _utils_apis_index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(40795);\n\nconst fetchBlogsList = async (lang, page, per)=>{\n    const { data  } = await _utils_apis_index__WEBPACK_IMPORTED_MODULE_0__/* [\"default\"].get */ .ZP.get(\"/blogs\", {\n        params: {\n            lang,\n            page,\n            per,\n            workspace: \"propeasy\"\n        }\n    });\n    return data;\n};\nconst fetchBlogDetail = async (slug)=>{\n    const { data  } = await _utils_apis_index__WEBPACK_IMPORTED_MODULE_0__/* [\"default\"].get */ .ZP.get(\"/blog/\".concat(slug));\n    return data;\n};\n\n\n/***/ })\n\n},\n/******/ function(__webpack_require__) { // webpackRuntimeModules\n/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }\n/******/ __webpack_require__.O(0, [552,798,520,774,888,179], function() { return __webpack_exec__(35106); });\n/******/ var __webpack_exports__ = __webpack_require__.O();\n/******/ _N_E = __webpack_exports__;\n/******/ }\n]);"],"names":["self","push","__unused_webpack_module","__unused_webpack_exports","__webpack_require__","window","__NEXT_P","__webpack_exports__","d","seo","jsx_runtime","head","head_default","n","Seo","data","param","title","description","url","thumbnailUrl","jsxs","children","jsx","name","content","property","EmptyLayout","MainLayout","Z","Paper","className","r","__N_SSP","_slug_","layouts","es","blogs","react","base","Container","Stack","IconButton","Typography","Box","useTrans","next_image","image_default","lib","YouTubeVideo","props","id","ref","useRef","width","setWidth","useState","useLayoutEffect","_ref_current","current","offsetWidth","src","concat","height","allow","Markdown","maxWidth","input","U","components","alt","split","style","display","margin","useResize","getWidth","useCallback","_myRef_current","myRef","undefined","useEffect","handleResize","addEventListener","removeEventListener","FacebookShareButton","TwitterShareButton","TelegramShareButton","static_import_icon","helpers","Tooltip","Button","copy_to_clipboard","copy_to_clipboard_default","CopyToClipboard","text","copiedText","setCopiedText","handleClickCopy","sx","border","borderColor","textTransform","onClick","copy","next_router","View","blog","trans","router","useRouter","hooks_useResize","urlShare","s3","slug","direction","spacing","size","N","u","BACK_ICON","common","back","alignItems","blog_detail","published_at","public_date","variant","gap","justifyContent","FACEBOOK_DARK_ICON","TWITTER_DARK_ICON","TELEGRAM_DARK_ICON","banner","BlogDetailWithMemo","memo","displayName","BlogDetailPage","BlogDetails","blogDetail","setBlogDetail","dataBlogDetail","useQuery","Fragment","p","fetchBlogDetail","fetchBlogsList","_utils_apis_index__WEBPACK_IMPORTED_MODULE_0__","lang","page","per","ZP","get","params","workspace","O","s","_N_E"],"sourceRoot":""}